import React, {
  Component
} from 'react';
import {
  StyleSheet,
  Dimensions,
  InteractionManager,
  Image,
  View,
  TouchableWithoutFeedback,
  ScrollView,
  ListView,
  Text
} from 'react-native';

import Icon from 'react-native-vector-icons/FontAwesome';
import NavigationBar from 'react-native-navbar';
import Swiper from 'react-native-swiper';
import shopData from '../data/pages';
import {
  Col,
  Row,
  Grid
} from 'react-native-easy-grid';
const items = [{
  title: 'Hello Swiper',
  img: 'https://img.alicdn.com/tps/TB16culNpXXXXbHXpXXXXXXXXXX-520-280.jpg'
}, {
  title: 'Beautiful',
  img: 'https://aecpm.alicdn.com/simba/img/TB1vg.SNXXXXXarXXXXSutbFXXX.jpg'
}, {
  title: 'And simple',
  img: 'https://img.alicdn.com/tps/TB1QRxaNpXXXXXOapXXXXXXXXXX-520-280.jpg'
}];
var {
  height,
  width
} = Dimensions.get('window');
import Login from '../pages/Login';
import SlideBox from '../components/SlideBox';
import MenuButton from '../components/MenuButton';
import IconGroup from '../components/IconGroup';
import GoodList from '../components/GoodList';
import TitleWithLine from '../components/TitleWithLine';
const logoImg = require('../img/logo.png');

class Shop extends Component {
  constructor(props) {
    super(props);
    this.state = {
      dataSource: new ListView.DataSource({
        rowHasChanged: (r1, r2) => r1 !== r2,
      }),
    };
  }

  _pressButton() {
    this.props.navigator.push({
      component: Login
    })
  }

  _onPressButton() {
    alert('hello')
  }
  _renderRow(rowDate, sectionID, rowID){
     switch (rowDate.type) {
       case 'banner':
         return <SlideBox height={150} items={rowDate.datas} />;
       case 'iconGroup':
         return (<IconGroup row={5} items={rowDate.datas}/>);
       case 'goodList':
         return (<GoodList items={rowDate.datas}/>)
  
        
     }
  }
  render() {
      return (
        <View style={{ flex: 1}}>
          <NavigationBar
            tintColor='#ff5001'
            statusBar={{style:'light-content'}}
            title={{ title: shopData.title, tintColor:'#fff'}}
            leftButton={<Icon name="home" color="#fff" size={20} style={{alignSelf:'center',marginLeft: 8}} />}
            rightButton={<Icon name="server" color="#fff" size={20} onPress={this._pressButton.bind(this)} style={{alignSelf:'center',marginRight: 8}} />} 
            />
          <ListView
            dataSource={this.state.dataSource.cloneWithRows(shopData.modules)}
            renderRow={this._renderRow}
            enableEmptySections={true}
            style={{flex:1}}
            automaticallyAdjustContentInsets={false}
            initialListSize={1}
            />
      </View>
    );
  }
}

//样式表
const styles = StyleSheet.create({

  itemView: {
    backgroundColor: '#0f0',
    width: width / 2 - 2,
    height: (width / 2 - 2) + 70,
    marginBottom: 4
  },
  img: {
    width: width / 2 - 2,
    height: width / 2 - 2,
  },
  item: {
    flex: 1,
    backgroundColor: '#fff'
  }
});

export default Shop;